<script lang="ts">
import {defineComponent, h, ref} from "vue"
import {fileToBase64} from "@/units/file";
import {ElImage} from "element-plus"

export default defineComponent({
  name: "FileImage",
  props: {
    file: {
      type: File,
      required: true
    },
    width: {
      type: String
    },
    height: {
      type: String
    }
  },
  setup(props) {
    const str = ref('')

    /**
     * 图片转base64
     */
    fileToBase64(props.file).then(base64 => {
      if (base64.length > 0) {
        str.value = base64
      }
    })

    return () => h(ElImage, {
      src: str.value,
      previewSrcList:[str.value],
      previewTeleported:true,
      alt: props.file.name,
      loading: "lazy",
      style:{
        width: props.width,
        height: props.height
      }
    })
  }
})
</script>